<template>
  <a-spin :spinning="confirmLoading">
    <div class="fix">
      <div class="all-box-left">
        <div class="a-card is-always-shadow left-box left-box-normal">
          <a-card>
            <div class="score-card">
              <div class="score-box">
                <div>正确率：</div>
                <div style="text-align: center;margin: 10px">
                  <Progress type="circle" :percent="form?.userPractice?.accuracy" size="small" />
                </div>
                <div>正确题数：<span class="numberClass">{{ form?.userPractice?.rightNumber ?? 0
                  }} 题</span></div>
                <div>错误题数：<span
                  class="numberClass">{{ form?.userPractice?.totalNumber - form?.userPractice?.rightNumber
                  }} 题</span>
                </div>
                <div>总题数：<span class="numberClass">{{ form?.userPractice?.totalNumber ?? 0
                  }} 题</span></div>
              </div>
            </div>
          </a-card>
          <a-card>
            <a-divider />
            <div class="group-card">
              <div class="card-box">
                <div class="item" v-for="(numItem,index1) in answerCardList"
                     :key="index1">
                  <div :class="cardItemClass(numItem)">{{ numItem }}</div>
                </div>
              </div>
            </div>
          </a-card>
        </div>
      </div>
    </div>
    <div class="all-box-center">
      <div v-for="(userPracticeQuestion,index1) in form?.questionList" :key="index1">
        <div class="a-card content-card is-always-shadow">
          <a-card v-if="userPracticeQuestion.question">
            <div class="qu-box" :id="'anchor'+ userPracticeQuestion.sort">
              <div class="qu-item">
                <div class="num">
                  {{ userPracticeQuestion.sort }}
                </div>
                <div class="content">
                  <span v-html="userPracticeQuestion.question.content"></span>
                </div>
              </div>
              <div v-if="userPracticeQuestion.questionType == 4">
                <Tinymce v-model="userPracticeQuestion.answer" :disabled="true" />
              </div>
              <div class="qu-answer" v-else>
                <div class="item"
                     v-for="(answerItem,index2) in userPracticeQuestion.question.answerList"
                     :key="index2">
                  <div class="tag">{{ answerItem.tag }}</div>
                  <div class="content">
                    {{ answerItem.content }}
                    <a-tag color="success"
                           v-if="userPracticeQuestion.questionType!=5 && answerItem.isRight"
                           :style="{float:'right'}">
                      <template #icon>
                        <check-circle-outlined />
                      </template>
                    </a-tag>
                  </div>
                </div>
              </div>
              <div class="as-box">
                <div>
                  <div class="right-line">
                    <template v-if="userPracticeQuestion.isRight!=null">
                      <a-alert message="答对了" type="success" show-icon
                               v-if="userPracticeQuestion.isRight" />
                      <a-alert message="答错了" type="error" show-icon v-else />
                    </template>
                  </div>
                </div>
                <div v-if="userPracticeQuestion.questionType < 4">
                  <div>考生答案：{{ userPracticeQuestion.answer }}</div>
                </div>
                <div v-else-if="userPracticeQuestion.questionType == 5">
                  <div v-if="userPracticeQuestion.question.answerList.length>1">
                    备注：
                    <span v-if="userPracticeQuestion.question.answerOrder">答案有序</span>
                    <span v-else>答案无序</span>
                  </div>
                </div>
                <div>难易程度：{{
                    userPracticeQuestion.question.level == 1 ? "简单" : userPracticeQuestion.question.level == 2 ? "一般" : "较难"
                  }}
                </div>
                <template
                  v-if="userPracticeQuestion.question.analysis && userPracticeQuestion.question.analysis.length>0">
                  <div>试题解析：</div>
                  <span v-html="userPracticeQuestion.question.analysis"></span>
                </template>
              </div>
            </div>
          </a-card>
        </div>
      </div>
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { apiGetPracticeResult } from "@/api/practice";
import { useRoute } from "vue-router";
import { Progress } from "ant-design-vue";
import { Tinymce } from "@/components/public/Tinymce";
import { CheckCircleOutlined } from "@ant-design/icons-vue";

const form = ref<any>();
const confirmLoading = ref<boolean>(false);
const route = useRoute();
const userPracticeId = route.params?.id ?? -1;
const answerCardList = ref<any>([]);

async function initFormData() {
  try {
    confirmLoading.value = true;
    const data: any = await apiGetPracticeResult(userPracticeId);
    form.value = { ...data.result };
    answerCardList.value = [];
    form.value.questionList?.forEach((item: any) => {
      answerCardList.value.push(item.sort);
    });
  } finally {
    confirmLoading.value = false;
  }
}

initFormData();

// 答题卡样式
function cardItemClass(index) {
  const tmpList: any = form.value.questionList.filter((val: any) => val.sort == index);
  if (tmpList && tmpList.length > 0) {
    if (tmpList[0].isRight != null) {
      if (tmpList[0].isRight) {
        return "num success";
      } else {
        return "num error";
      }
    } else {
      return "num info";
    }
  }
}
</script>

<style scoped>
.all-box-left {
  width: 285px;
  flex: 0 0 285px;
}

.left-box-normal {
}

.left-box {
  height: calc(100vh - 70px);
  position: fixed;
  overflow: auto;
  clear: both;
  width: 285px;
}

.a-card.is-always-shadow {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.a-card {
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #FFFFFF;
  color: #303133;
  transition: 0.3s;
}

.ant-card-bordered {
  border: none;
}

>>> .ant-card-body {
  padding: 20px 20px 0px 20px;
}

.group-card {
  margin-bottom: 15px;
  line-height: 28px;
  width: 100%;
}

.typeClass {
  font-size: 14px;
  font-weight: 700;
}

.group-card-body {
  line-height: 22px;
  font-size: 14px;
}

.numberClass {
  color: #448efc;
  font-style: italic;
}

.card-box {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-left: -5px;
  margin-top: 10px;
}

.card-box .item {
  width: 30px;
  height: 35px;
  background: #eee;
  border-radius: 2px;
  font-size: 12px;
  -webkit-box-align: center;
  align-items: center;
  margin: 5px 5px 10px 5px;
  float: left;
}

.card-box .item .num {
  text-align: center;
  padding: 3px;
  height: 20px;
  line-height: 14px !important;
}

.card-box .item .success {
  border-radius: 2px;
  background: #00bb00;
  color: #fff !important;
}

.card-box .item .info {
  border-radius: 2px;
  background: #1890ff;
  color: #fff !important;
}

.card-box .item .error {
  border-radius: 2px;
  background: red;
  color: #fff !important;
}

.ant-divider-horizontal {
  margin: 5px 0;
  width: 100%;
}

.ant-divider {
  background-color: #DCDFE6;
  position: relative;
}

.all-box-center {
  margin-left: 300px;
  padding: 12px;
  min-height: 88.5vh;
}

.content-card {
  margin-bottom: 20px;
  line-height: 28px;
}

.a-card.is-always-shadow {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}


.qu-box {
  /*margin-bottom: 20px;*/
}

.qu-item {
  display: flex;
  margin-bottom: 20px;
}

.qu-item > .num {
  display: inline-block;
  background: url("../../assets/img/pick.png") no-repeat 100% 100%;
  background-size: contain;
  height: 35px;
  width: 35px;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.qu-item > .content {
  -webkit-box-flex: 1;
  flex-grow: 1;
  -webkit-box-align: start;
  align-items: flex-start;
}

.qu-answer > .item {
  display: flex;
  border: #eee 1px solid;
  border-radius: 5px;
  line-height: 20px;
  margin: 15px 0px 15px 0px;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
}

.qu-answer > .item > .tag {
  width: 10px;
  font-weight: 700;
  color: #0a84ff;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.qu-answer > .item > .content {
  -webkit-box-flex: 1;
  flex-grow: 1;
  padding-left: 10px;
}

.qu-answer > .item > .right {
  width: 50px;
  flex-shrink: 0;
}

.score-box {
  font-size: 16px;
  line-height: 32px;
  padding: 10px;
}

.score-card {
  line-height: 28px;
  width: 100%;
}

.as-box {
  border: #eee 1px solid;
  border-radius: 5px;
  line-height: 24px;
  margin: 5px 0px 10px 0px;
  padding: 10px;
  font-size: 14px;
  color: #555;
  background: #fcfcfc;
}

.right-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}

.right-line .right {
  color: #03DD6D;
  font-size: 22px;
  margin-right: 10px;
}

.fix {
  position: fixed;
  width: 285px;
  left: 20px;
  top: 60px;
  background: #fff;
}

:deep(.ant-anchor-link-title) {
  color: #fff
}

.result-box {
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  line-height: 50px;
  min-height: 50vh;
  justify-content: center;
}

.result-box .score {
  font-size: 60px;
  font-weight: 700;
  color: #0a84ff;
}

.result-box .score span {
  font-size: 20px;
}

.tip .info {
  border-radius: 2px;
  background: #1890ff;
  color: #fff !important;
  text-align: center;
  padding: 3px;
  height: 20px;
  line-height: 14px !important;
}

.tip .error {
  border-radius: 2px;
  background: red;
  color: #fff !important;
  text-align: center;
  padding: 3px;
  height: 20px;
  line-height: 14px !important;
}

.tip .success {
  border-radius: 2px;
  background: #00bb00;
  color: #fff !important;
  text-align: center;
  padding: 3px;
  height: 20px;
  line-height: 14px !important;
}

:deep(span.xe-blanknumber) {
  min-width: 4em;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border-bottom: black solid 1px;
}
</style>
